﻿

/*header*/
.layout-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: transparent;
    z-index: 2;
    height: 71px
}

    .layout-header .tnt-logo {
        margin-top:10px;
        height: 51px;
        float: left
    }

    .layout-header .layout-main-menu {
        height: 100%;
        /*margin: auto;*/
        margin-left: 100px;
        margin-right: 200px;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 20px;
        padding-right: 20px
    }



        .layout-header .layout-main-menu .sea-blue {
            background-color: #1976d2;
            transition: background-color .2s
        }

        .layout-header .layout-main-menu .nav-list {
            list-style: none;
            position: absolute;
            padding-left: 0;
            display: none;
            margin: 0;
            width: 100%;
            background-color: rgba(33,34,49,.95);
            left: 0;
            top: 65px
        }

            .layout-header .layout-main-menu .nav-list > li {
                margin: 0 20px;
                font-size: 16px;
                font-weight: lighter;
                color: #fff
            }

                .layout-header .layout-main-menu .nav-list > li a {
                    height: 50px;
                    line-height: 50px;
                    border-bottom: 1px solid #003751;
                    display: block;
                    padding-left: 10px;
                    text-decoration: none
                }

                .layout-header .layout-main-menu .nav-list > li > a {
                    font-size: 16px;
                    color: #fff;
                    text-decoration: none
                }

                    .layout-header .layout-main-menu .nav-list > li > a > i {
                        transition: .2s;
                        margin-top: 17px
                    }

                .layout-header .layout-main-menu .nav-list > li.has-child > a {
                    cursor: default
                }

                .layout-header .layout-main-menu .nav-list > li.has-child.about-dg > a {
                    cursor: pointer
                }

                .layout-header .layout-main-menu .nav-list > li > .child-list-container {
                    display: none
                }

                    .layout-header .layout-main-menu .nav-list > li > .child-list-container > .child-list {
                        list-style: none;
                        padding-left: 20px
                    }

                        .layout-header .layout-main-menu .nav-list > li > .child-list-container > .child-list a {
                            color: #fff;
                            font-size: 14px;
                            font-weight: 300;
                            display: inline-block;
                            border: none
                        }

                        .layout-header .layout-main-menu .nav-list > li > .child-list-container > .child-list span {
                            margin-left: 10px;
                            color: red;
                            font-size: 14px;
                            font-weight: 300
                        }

                .layout-header .layout-main-menu .nav-list > li.show-list i {
                    transform: rotate(90deg)
                }

            .layout-header .layout-main-menu .nav-list.show-list {
                display: block
            }

        .layout-header .layout-main-menu .toogle-button-holder {
            display: inline-block;
            float: right;
            width: 50%;
            margin: 0
        }

            .layout-header .layout-main-menu .toogle-button-holder .layout-main-menu-mobile-button {
                float: right;
                position: relative;
                display: inline-block
            }

                .layout-header .layout-main-menu .toogle-button-holder .layout-main-menu-mobile-button .dg-button-img {
                    background-image: url(//static.datagrand.com/images/share/head/m-sprite-nav.png);
                    background-size: 98px auto;
                    background-repeat: no-repeat;
                    margin-top: 2px
                }

                .layout-header .layout-main-menu .toogle-button-holder .layout-main-menu-mobile-button.m-more .dg-button-img {
                    display: inline-block;
                    width: 27px;
                    height: 22px
                }

                .layout-header .layout-main-menu .toogle-button-holder .layout-main-menu-mobile-button.m-close .dg-button-img {
                    display: none;
                    width: 19px;
                    height: 19px;
                    background-position: -51px 0;
                    margin-top: 5px
                }

            .layout-header .layout-main-menu .toogle-button-holder.show-list .m-more .dg-button-img {
                display: none
            }

            .layout-header .layout-main-menu .toogle-button-holder.show-list .m-close .dg-button-img {
                display: inline-block
            }

@media (min-width:480px) {
    .layout-header {
        height: 71px;
        border-bottom: 1px solid hsla(0,0%,100%,.05)
    }

        .layout-header .layout-main-menu {
            width: 1180px;
            padding: 0;
            height: 100%;
    /*        margin: auto*/
        }

            .layout-header .layout-main-menu .tnt-logo {
                margin: 0;
                width: 120px;
                height: 43px;
                margin-top: 13px
            }

            .layout-header .layout-main-menu .nav-list {
                display: block;
                position: static;
                list-style: none;
                float: right;
                width: auto;
                padding: 0;
                background-color: transparent;
                margin: -1px 0 0
            }

                .layout-header .layout-main-menu .nav-list > li {
                    display: inline-block;
                    position: relative;
                    font-size: 16px;
                    height: 100%;
                    line-height: 70px;
                    margin: 0 40px 0 0;
                    cursor: pointer;
                    text-decoration: none;
                    font-weight: 400
                }

                    .layout-header .layout-main-menu .nav-list > li a {
                        height: auto;
                        line-height: 70px;
                        padding-left: 0;
                        border: none
                    }

                        .layout-header .layout-main-menu .nav-list > li a.header-button {
                            display: inline-block;
                            border: 1px solid #0079ee;
                            color: #fff;
                            text-align: center;
                            background: #0079ee;
                            width: 100px;
                            height: 34px;
                            border-radius: 2px;
                            line-height: 32px;
                            text-decoration: none
                        }

                            .layout-header .layout-main-menu .nav-list > li a.header-button:visited {
                                color: #fff;
                                background: #187afa
                            }

                            .layout-header .layout-main-menu .nav-list > li a.header-button:hover {
                                border: 1px solid #1976d2;
                                background: #187afa;
                                color: #fff
                            }

                    .layout-header .layout-main-menu .nav-list > li > a:active, .layout-header .layout-main-menu .nav-list > li > a:hover {
                        color: rgba(255,253,253,.8)
                    }

                    .layout-header .layout-main-menu .nav-list > li .child-list-container {
                        position: absolute;
                        display: none;
                        opacity: 0;
                        padding: 18px 10px;
                        margin: 0;
                        top: 54px;
                        left: -20px
                    }

                        .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list {
                            list-style: none;
                            /*                            background-color: #11192f;*/
                            padding: 5px 0;
                            white-space: nowrap;
                            opacity: .95
                        }

                            .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list:after {
                                content: "";
                                display: block;
                                clear: both;
                                zoom: 1
                            }

                            .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list:before {
                                content: "";
                                position: absolute;
                                width: 0;
                                height: 0;
                                top: 8px;
                                left: 20px
                            }

                            .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .child-title:nth-child(odd) {
                                float: left;
                                width: 50%;
                                clear: both
                            }

                            .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .child-title:nth-child(2n) {
                                float: right;
                                width: 50%
                            }

                            .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .child-title {
                                padding: 6px 20px;
                                font-weight: 400
                            }

                                .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .child-title > li:first-child {
                                    border-top: 1px solid #323235;
                                    margin-top: 10px
                                }

                                .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .child-title > li > a {
                                    color: #fff;
                                    font-size: 14px;
                                    height: 36px;
                                    line-height: 36px;
                                    text-decoration: none;
                                    overflow: hidden;
                                    display: inline;
                                    margin-right: 5px;
                                    padding-top: 8px
                                }

                                    .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .child-title > li > a:hover {
                                        color: #1976d2
                                    }

                                .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .child-title > li > .newCon {
                                    color: red;
                                    font-size: 14px
                                }

                            .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .one-child {
                                padding: 4px 20px;
                                font-weight: 400
                            }

                                .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .one-child > li:first-child {
                                    border-top: 1px solid #323235;
                                    margin-top: 10px
                                }

                                .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .one-child > li > a {
                                    color: #fff;
                                    font-size: 14px;
                                    height: 36px;
                                    line-height: 36px;
                                    text-decoration: none;
                                    overflow: hidden;
                                    padding-top: 8px
                                }

                                    .layout-header .layout-main-menu .nav-list > li .child-list-container .child-list > .one-child > li > a:hover {
                                        color: #1976d2
                                    }

                                .layout-header .layout-main-menu .nav-list > li:last-child {
                        margin-right: 0;
                        font-size: 14px;
                        padding: 0 20px
                    }

                    .layout-header .layout-main-menu .nav-list > li:nth-last-child(2) {
                        margin-right: 0;
                        font-size: 14px;
                        margin-right: 85px
                    }

            .layout-header .layout-main-menu .toogle-button-holder {
                display: none
            }
}


/*footer*/
.layout-footer .layout-footer-container .layout-footer-friend-link a, .layout-footer-link {
    color: #aeaeae;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s
}

    .layout-footer .layout-footer-container .layout-footer-friend-link a:hover, .layout-footer-link:hover {
        color: #fff
    }

.layout-footer {
    background-color: #131b33;
    font-family: Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif
}

    .layout-footer .footer-desc {
        display: none
    }

    .layout-footer .layout-footer-container {
        padding-top: 30px
    }

        .layout-footer .layout-footer-container > .link-list {
            font-family: Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
            display: inline-block;
            vertical-align: top;
            list-style: none;
            margin: 0 90px 0 0;
            padding: 0;
            border-bottom: 1px solid hsla(0,0%,40%,.35);
            width: 100%;
            padding-bottom: 24px
        }

            .layout-footer .layout-footer-container > .link-list > li {
                color: hsla(0,0%,100%,.6);
                font-size: 14px;
                line-height: 32px;
                font-weight: lighter;
                padding-left: 10px
            }

            .layout-footer .layout-footer-container > .link-list.link-last-link {
                margin-right: 0
            }

        .layout-footer .layout-footer-container > .app-info {
            height: 52px;
            line-height: 52px;
            color: #1976d2;
            border-bottom: 1px solid hsla(0,0%,40%,.35);
            padding-left: 10px;
            font-weight: lighter
        }

            .layout-footer .layout-footer-container > .app-info a {
                color: #1976d2
            }

        .layout-footer .layout-footer-container .layout-footer-friend-link {
            margin-top: 50px;
            padding: 30px 0;
            text-align: center;
            border-top: 1px solid hsla(0,0%,40%,.2);
            border-bottom: 1px solid hsla(0,0%,40%,.2)
        }

            .layout-footer .layout-footer-container .layout-footer-friend-link span {
                color: hsla(0,0%,100%,.6)
            }

            .layout-footer .layout-footer-container .layout-footer-friend-link a {
                color: hsla(0,0%,100%,.6);
                margin-left: 1em
            }

    .layout-footer .layout-footer-copy-right {
        font-size: 12px;
        color: #aeaeae;
        height: 67px;
        line-height: 67px;
        padding-left: 30px
    }

    .layout-footer .copy-right-img {
        width: 18px;
        margin-right: 8px
    }

@media (min-width:480px) {
    .layout-footer .layout-footer-container > .link-list > li a, .mobile-layout-footer-link {
        color: hsla(0,0%,100%,.6);
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        transition: color .2s
    }

        .layout-footer .layout-footer-container > .link-list > li a:hover, .mobile-layout-footer-link:hover {
            color: #fff
        }

    .layout-footer .footer-desc {
        display: block;
        color: hsla(0,0%,100%,.6);
        border-bottom: 1px solid hsla(0,0%,40%,.35);
        height: 120px
    }

        .layout-footer .footer-desc .footer-desc-item {
            margin-top: 25px
        }

            .layout-footer .footer-desc .footer-desc-item img {
                height: 72px
            }

            .layout-footer .footer-desc .footer-desc-item p {
                padding-left: 16px;
                display: inline-block;
                height: 72px;
                line-height: 72px;
                font-size: 16px;
                margin: 0
            }

    .layout-footer .layout-footer-container {
        margin: auto;
        padding: 40px 0 55px;
        padding-bottom: 0
    }

        .layout-footer .layout-footer-container > .link-list {
            display: inline-block;
            vertical-align: top;
            margin: 0 90px 0 0;
            padding: 0;
            border: none;
            width: auto
        }

            .layout-footer .layout-footer-container > .link-list > li {
                padding: 0;
                font-weight: 400
            }

                .layout-footer .layout-footer-container > .link-list > li:last-child {
                    padding-bottom: 0
                }

                .layout-footer .layout-footer-container > .link-list > li.link-title {
                    padding-bottom: 11px;
                    color: #fff;
                    font-size: 16px;
                    font-family: SimHei,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif
                }

    .layout-footer .layout-footer-copy-right {
        height: 50px;
        line-height: 50px;
        text-align: center
    }

        .layout-footer .layout-footer-copy-right .copy-right {
            font-size: 12px;
            color: hsla(0,0%,100%,.6)
        }

    .wx-code-li {
        position: relative;
        cursor: pointer
    }

        .wx-code-li .wx-code {
            color: #0070ef
        }

        .wx-code-li .qrcode {
            display: none;
            position: absolute;
            bottom: 10px;
            right: -20px;
            width: 90px;
            height: 90px
        }

        .iso-li, .wx-code-li:hover .qrcode {
            display: block
        }

            .iso-li img {
                height: 96px;
                margin-top: 30px
            }

            .iso-li p {
                margin: 0 10px
            }

    .copy-right-img {
        width: 18px;
        margin-right: 8px
    }
}


/*floatNav*/
.layout-float-nav .tool-list .tool-holder .text-holder1, .layout-float-nav .tool-list .tool-holder:hover .img-holder {
    display: none
}

.layout-float-nav .tool-list .tool-holder .img-holder {
    vertical-align: middle
}

.layout-float-nav {
    position: fixed;
    right: 5px;
    top: 50%;
    font-size: 0;
    margin-top: -100px;
    text-align: center;
    width: 45px;
    z-index: 999
}

    .layout-float-nav .tool-list {
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none
    }

        .layout-float-nav .tool-list .tool-holder {
            height: 45px;
            width: 45px;
            margin-bottom: 5px;
            background-color: #0073eb;
            cursor: pointer;
            overflow: hidden
        }



            .layout-float-nav .tool-list .tool-holder .text-holder,
            .layout-float-nav .tool-list .tool-holder .text-holder1 {
                font-size: 14px;
                font-weight: 400;
                line-height: 18px;
                color: #fff;
                margin: 0;
                height: 100%;
                padding: 4px 8px
            }

            .layout-float-nav .tool-list .tool-holder:hover .text-holder1 {
                display: block
            }

            .layout-float-nav .tool-list .tool-holder .link {
                text-decoration: none
            }


            .layout-float-nav .tool-list .tool-holder .img-holder img {
                width: 100%
            }

            .layout-float-nav .tool-list .tool-holder.contact .img-holder {
                margin: 8px 5px
            }

            .layout-float-nav .tool-list .tool-holder.apply .img-holder {
                margin: 8px
            }

            .layout-float-nav .tool-list .tool-holder.top .img-holder {
                margin: 10px 11px
            }

            .layout-float-nav .tool-list .tool-holder.tel .img-holder {
                margin: 7px 8px
            }

            .layout-float-nav .tool-list .tool-holder.tel .show-tel-tooltip {
                position: absolute;
                top: 102px;
                right: 55px;
                visibility: hidden;
                width: 130px;
                height: 40px;
                border-radius: 2px;
                background: blue;
                /*background: #fff;*/
                color: #000;
                vertical-align: middle;
                font-size: 16px;
                line-height: 40px;
                opacity: 0.2;
                /*opacity: 0;*/
                transition: .5s opacity
            }

                .layout-float-nav .tool-list .tool-holder.tel .show-tel-tooltip:before {
                    position: absolute;
                    top: 62px;
                    right: -16px;
                    z-index: 2;
                    width: 0;
                    height: 0;
                    border: 8px solid transparent;
                    content: "";
                    border-left-color: #fff
                }

            .layout-float-nav .tool-list .tool-holder.tel:hover .show-tel-tooltip {
                visibility: visible;
                opacity: 1;
                background-color: #fff
            }

            .layout-float-nav .tool-list .tool-holder.qrcode {
                display: none
            }

                .layout-float-nav .tool-list .tool-holder.qrcode .img-holder {
                    margin: 8px
                }

                .layout-float-nav .tool-list .tool-holder.qrcode .qrcode-holder {
                    width: 144px;
                    height: 144px;
                    position: absolute;
                    right: 37px;
                    top: 64px
                }

                    .layout-float-nav .tool-list .tool-holder.qrcode .qrcode-holder img {
                        width: 100%
                    }


@media (max-width:768px) {
    .layout-float-nav {
        display: none
    }
}
